<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019/4/30
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../common.jsp"%>
<html>
<head>
    <title>登录和注册页面</title>
</head>
<body>
     <div id="loginPage">
             <table>
                 <tr>
                     <th style="width: 30%">账号</th>
                     <td  style="width: 70%">
                     <input type="text" name="userCode" id="userCode" title="账号" placeholder="请输入账号"/>
                     </td>
                 </tr>

                 <tr>
                     <th style="width: 30%">密码</th>
                     <td  style="width: 70%">
                     <input type="password" name="password" id="password" title="密码" placeholder="请输入密码"/>
                     </td>
                 </tr>

                 <tr>
                     <th style="width: 30%">验证码</th>
                     <td  style="width: 40%">
                         <input type="text" name="validationCode" id="validationCode" title="验证码" placeholder="验证码"/>
                     </td>
                     <td  style="width: 30%">
                        <div onclick="changeVildationImg()">
                            <img src="" id="validation_img">
                        </div>
                     </td>
                 </tr>

                 <tr>
                     <td width="50%">
                         <input type="button" onclick="submitLogin();" value="登陆" />
                     </td>
                     <td width="50%">
                         <input type="button" id="userReg" value="注册" />
                     </td>

                 </tr>
             </table>
     </div>

     <div id="regPage" style="display: none">
         <table>
             <tr>
                 <th style="width: 30%">姓名</th>
                 <td  style="width: 70%">
                     <input type="text" name="username" id="username" title="姓名" placeholder="请输入姓名"/>
                 </td>
             </tr>
             <tr>
                 <th style="width: 30%">账号</th>
                 <td  style="width: 70%">
                     <input type="text" name="userCode" id="regusercode" title="账号" placeholder="请输入账号"/>
                 </td>
             </tr>

             <tr>
                 <th style="width: 30%">密码</th>
                 <td  style="width: 70%">
                     <input type="password" name="password" id="regpassword" title="密码" placeholder="请输入密码"/>
                 </td>
             </tr>
             <tr>
                 <th style="width: 30%">电话</th>
                 <td  style="width: 70%">
                     <input type="text" name="phone" id="phone" title="电话" placeholder="请输入电话"/>
                 </td>
             </tr>
             <tr>
                 <th style="width: 30%">邮箱</th>
                 <td  style="width: 70%">
                     <input type="text" name="email" id="email" title="邮箱" placeholder="请输入邮箱"/>
                 </td>
             </tr>
             <tr>
                 <th style="width: 30%">地址</th>
                 <td  style="width: 70%">
                     <input type="text" name="address" id="address" title="地址" placeholder="请输入地址"/>
                 </td>
             </tr>

             <tr>
                 <td width="50%">
                     <input type="button" onclick="submitReg()" value="提交" />
                 </td>
                 <td width="50%">
                     <input type="button" onclick="cancelReg()" value="取消" />
                 </td>

             </tr>
         </table>

     </div>
</body>
<script type="application/javascript">
    var layer;
   $(function(){
       layer = layui.layer;
       $("#validation_img").attr("src",ctx+"/user/validationImg?random="+new Date().getTime());
      $("#userReg").on("click",userReg);
   });

   function userReg(){
       $("#loginPage").hide();
       $("#regPage").show();
   }

    function changeVildationImg() {
        $("#validation_img").attr("src",ctx+"/user/validationImg?random="+new Date().getTime());
    }

    function submitReg(){
      var regData={
          userName:$("#username").val(),
          password:$("#regpassword").val(),
          userCode:$("#regusercode").val(),
          phone:$("#phone").val(),
          email:$("#email").val(),
          address:$("#address").val()
      };
      $.post(ctx+"/user/regNewUser",regData,function (data) {
          if(data.status){
              layer.msg(data.respMsg);
              $("#regPage").hide();
              $("#loginPage").show();
          }else{
              layer.alert(data.respMsg);
              $("#regPage").hide();
              $("#loginPage").show();
          }
      });
    }

    function cancelReg(){
        $("#regPage").hide();
        $("#loginPage").show();

    }

    function submitLogin(){
       var vardata ={
           userCode:$("#userCode").val(),
           password:$("#password").val(),
           validationCode:$("#validationCode").val()

       }
       $.post(ctx+"/user/login",vardata,function(data){
           if(data.status){
              window.location.href=ctx+"/home/homePage";
           }else{
               layer.msg(data.respMsg);
           }
       });
    }


</script>
</html>
